<!--
  工作台页面组件
  作为系统的首页，展示关键业务数据统计和图表
-->
<template>
  <!-- 工作台容器 -->
  <div class="dashboard-container">
    <!-- 数据统计头部区域 -->
    <el-row :gutter="20" class="dashboard-header">
      <!-- 总收入统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <!-- 收入图标 -->
            <div class="stat-icon income">
              <el-icon><Money /></el-icon>
            </div>
            <!-- 收入信息 -->
            <div class="stat-info">
              <div class="stat-title">总收入</div>
              <div class="stat-value">{{ formatCurrency(stats.totalRevenue) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 订单数统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <!-- 订单图标 -->
            <div class="stat-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <!-- 订单信息 -->
            <div class="stat-info">
              <div class="stat-title">订单数</div>
              <div class="stat-value">{{ stats.totalOrders }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 客户数统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <!-- 客户图标 -->
            <div class="stat-icon customers">
              <el-icon><User /></el-icon>
            </div>
            <!-- 客户信息 -->
            <div class="stat-info">
              <div class="stat-title">客户数</div>
              <div class="stat-value">{{ stats.totalCustomers }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 产品数统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <!-- 产品图标 -->
            <div class="stat-icon products">
              <el-icon><Goods /></el-icon>
            </div>
            <!-- 产品信息 -->
            <div class="stat-info">
              <div class="stat-title">产品数</div>
              <div class="stat-value">{{ stats.totalProducts }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 内容区域 -->
    <el-row :gutter="20" class="dashboard-content">
      <!-- 销售趋势图表区域 -->
      <el-col :span="16">
        <el-card class="chart-card" v-loading="chartLoading">
          <!-- 卡片头部 -->
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <!-- 图表容器 -->
          <div class="chart-container">
            <div ref="chartRef" class="chart-wrapper"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 最新订单区域 -->
      <el-col :span="8">
        <el-card class="recent-card" v-loading="ordersLoading">
          <!-- 卡片头部 -->
          <template #header>
            <div class="card-header">
              <span>最新订单</span>
            </div>
          </template>
          <!-- 最新订单列表 -->
          <div class="recent-orders">
            <el-table :data="recentOrders" style="width: 100%" :show-header="false">
              <el-table-column prop="orderNumber" label="订单号" width="120"></el-table-column>
              <el-table-column prop="customer" label="客户"></el-table-column>
              <el-table-column prop="amount" label="金额" width="100"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/**
 * 工作台页面组件选项配置
 * 使用多词命名符合Vue组件命名规范
 */
defineOptions({
  name: 'DashboardView'
})

// 从Vue中导入所需API
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 导入Element Plus组件和相关API
import { ElMessage } from 'element-plus'

// 导入所需的图标组件
import { Money, Document, User, Goods } from '@element-plus/icons-vue'

// 导入echarts图表库
import * as echarts from 'echarts'

// 导入API函数
import { getDashboardStats, getRecentOrders } from '@/api/Dashboard'

// 响应式数据定义
const stats = ref({
  totalRevenue: 0,
  totalOrders: 0,
  totalCustomers: 0,
  totalProducts: 0
})

const recentOrders = ref([])
const chartRef = ref(null)
let chartInstance = null

// 加载状态
const ordersLoading = ref(false)
const chartLoading = ref(false)

/**
 * 格式化货币显示
 * @param {number} value - 数值
 * @returns {string} 格式化后的货币字符串
 */
const formatCurrency = (value) => {
  if (value === null || value === undefined) return '¥0.00'
  return parseFloat(value).toLocaleString('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

/**
 * 获取首页统计数据
 */
const fetchDashboardStats = async () => {
  try {
    const response = await getDashboardStats()
    if (response && response.data) {
      // 修复数据结构映射问题
      stats.value = {
        totalRevenue: response.data.totalAmount || 0,
        totalOrders: response.data.orders || 0,
        totalCustomers: response.data.customers || 0,
        totalProducts: response.data.products || 0
      }
    }
  } catch (error) {
    console.error('获取首页统计数据失败:', error)
    ElMessage.error('获取首页统计数据失败: ' + (error.message || '未知错误'))
  }
}

/**
 * 获取最新订单列表
 */
const fetchRecentOrders = async () => {
  try {
    ordersLoading.value = true
    const response = await getRecentOrders()
    if (response && response.data) {
      recentOrders.value = response.data
    } else {
      recentOrders.value = []
    }
  } catch (error) {
    console.error('获取最新订单失败:', error)
    ElMessage.error('获取最新订单失败: ' + (error.message || '未知错误'))
    recentOrders.value = []
  } finally {
    ordersLoading.value = false
  }
}

/**
 * 初始化图表
 */
const initChart = () => {
  if (chartRef.value) {
    if (chartInstance) {
      chartInstance.dispose()
    }
    chartInstance = echarts.init(chartRef.value)
    renderChart()
  }
}

/**
 * 渲染图表
 */
const renderChart = () => {
  if (!chartInstance) return

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>{a}: ¥{c}'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: value => `¥${(value / 1000).toFixed(0)}k`
      }
    },
    series: [{
      name: '销售额',
      type: 'line',
      data: [120000, 132000, 101000, 134000, 90000, 230000],
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(64, 158, 255, 0.3)'
          }, {
            offset: 1, color: 'rgba(64, 158, 255, 0.05)'
          }]
        }
      }
    }]
  }

  chartInstance.setOption(option)
}

/**
 * 获取销售趋势数据
 */
const fetchSalesTrend = async () => {
  try {
    chartLoading.value = true
    // 这里应该调用获取销售趋势数据的API
    // 暂时使用模拟数据
    setTimeout(() => {
      initChart()
      chartLoading.value = false
    }, 500)
  } catch (error) {
    console.error('获取销售趋势数据失败:', error)
    ElMessage.error('获取销售趋势数据失败: ' + (error.message || '未知错误'))
    chartLoading.value = false
  }
}

/**
 * 调整图表大小
 */
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDashboardStats()
  fetchRecentOrders()
  fetchSalesTrend()

  // 添加窗口大小改变事件监听器
  window.addEventListener('resize', resizeChart)
})

// 组件卸载前清理
onBeforeUnmount(() => {
  // 移除窗口大小改变事件监听器
  window.removeEventListener('resize', resizeChart)

  // 销毁图表实例
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style scoped>
/**
 * 工作台页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 工作台容器样式 */
.dashboard-container {
  padding: 20px;
}

/* 工作台头部样式 */
.dashboard-header {
  margin-bottom: 20px;
}

/* 统计卡片样式 */
.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 统计内容样式 */
.stat-content {
  display: flex;
  align-items: center;
}

/* 统计图标样式 */
.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

/* 收入图标样式 */
.stat-icon.income {
  background-color: #e6f7ff;
  color: #1890ff;
}

/* 订单图标样式 */
.stat-icon.orders {
  background-color: #fff1f0;
  color: #f5222d;
}

/* 客户图标样式 */
.stat-icon.customers {
  background-color: #f9f0ff;
  color: #722ed1;
}

/* 产品图标样式 */
.stat-icon.products {
  background-color: #f6ffed;
  color: #52c41a;
}

/* 统计信息样式 */
.stat-info {
  flex: 1;
}

/* 统计标题样式 */
.stat-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

/* 统计数值样式 */
.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

/* 图表卡片和最近订单卡片样式 */
.chart-card,
.recent-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 卡片头部样式 */
.card-header {
  font-weight: bold;
  font-size: 16px;
}

/* 图表容器样式 */
.chart-container {
  height: 300px;
}

/* 图表包装器样式 */
.chart-wrapper {
  width: 100%;
  height: 100%;
}

/* 最近订单列表样式 */
.recent-orders {
  height: 300px;
}
</style>
